<!DOCTYPE html>

<html lang="en" class="no-js">

	<head>

		<meta charset="UTF-8" />

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 

		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

		<title>Blueprint: Split Layout</title>

		<meta name="description" content="Blueprint: Split Layout" />

		<meta name="keywords" content="website template, layout, css3, transition, effect, split, dual, two sides, portfolio" />

		<meta name="author" content="Codrops" />

		<link rel="shortcut icon" href="../favicon.ico">

		<link rel="stylesheet" type="text/css" href="css/demo.css" />

		<link rel="stylesheet" type="text/css" href="css/component.css" />

		<script src="js/modernizr.custom.js"></script>

	</head>

	<body>

		<div class="container">

			<div id="splitlayout" class="splitlayout">

				<div class="intro">

					<div class="side side-left">

						<header class="codropsheader clearfix">

							<span>Blueprint <span class="bp-icon bp-icon-about" data-content="The Blueprints are a collection of basic and minimal website concepts, components, plugins and layouts with minimal style for easy adaption and usage, or simply for inspiration."></span></span>

							<h1>Split Layout</h1>

							

							<div class="demos">

								<a class="current" href="index.html">Effect 1</a>

								<a href="index2.html">Effect 2</a>

							</div>

						</header>

						<div class="intro-content">

							<div class="profile"><img src="img/profile1.jpg" alt="profile1"></div>

							<h1><span>Toby Blue </span><span>Web Designer</span></h1>

						</div>

						<div class="overlay"></div>

					</div>

					<div class="side side-right">

						<div class="intro-content">

							<div class="profile"><img src="img/profile2.jpg" alt="profile2"></div>

							<h1><span>Amy White </span><span>Web Developer</span></h1>

						</div>

						<div class="overlay"></div>

					</div>

				</div><!-- /intro -->

				<div class="page page-right">

					<div class="page-inner">

						

					</div><!-- /page-inner -->

				</div><!-- /page-right -->

				<div class="page page-left">

					<div class="page-inner">

						

					</div><!-- /page-inner -->

				</div><!-- /page-left -->

				<a href="#" class="back back-right" title="back to intro">&rarr;</a>

				<a href="#" class="back back-left" title="back to intro">&larr;</a>

			</div><!-- /splitlayout -->

		</div><!-- /container -->

		<script src="js/classie.js"></script>

		<script src="js/cbpSplitLayout.js"></script>

	</body>

</html>

